{% extends 'base.html' %}

{% block title %}信息列表{% endblock %}

{% block content %}
<div class="container mt-5 mb-5">
    <div class="row">
        <!-- 分类筛选 -->
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">分类筛选</h5>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{% url 'product_list' %}" class="list-group-item list-group-item-action {% if not category %}active{% endif %}">
                        全部分类
                    </a>
                    {% for cat in categories %}
                    <a href="{% url 'product_list' %}?category={{ cat.id }}" 
                       class="list-group-item list-group-item-action {% if category == cat %}active{% endif %}">
                        {{ cat.name }}
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- 产品列表 -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">信息列表</h5>
                </div>
                <div class="card-body">
                    <div class="row g-4">
                        {% for product in products %}
                        <div class="col-md-4">
                            <div class="card h-100">
                                {% if product.image %}
                                <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.title }}">
                                {% endif %}
                                <div class="card-body">
                                    <h5 class="card-title">{{ product.title }}</h5>

                                <div class="mb-3">
                                    <small class="text-muted">
                                        <i class="fas fa-folder me-1"></i>分类：{{ product.category.name }}<br>
                                        <i class="fas fa-user me-1"></i>联系人：{{ product.publisher.nickname }}<br>
                                        <i class="fas fa-user me-1"></i>联系电话：{{ product.publisher.phone }}<br>
                                        <i class="fas fa-clock me-1"></i>发布时间：{{ product.created_at|date:"Y-m-d H:i" }}
                                    </small>
                                </div>
                                    <a href="{% url 'product_detail' product.id %}" class="btn btn-outline-primary btn-sm">查看详情</a>
                                </div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="col-12">
                            <div class="alert alert-info">
                                暂无产品信息
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
